<template>
	<view class="cell-page">
		<view class="u-page__item">
			<u-cell-group>
				<u-cell @click="onClick(item)" v-for="(item,index) in datas" :key="index">
					<view slot="title" class="u-slot-title">
						<u-tag :text="getTitle(item)" plain size="mini" type="warning">
						</u-tag>
						<u-tag :text="item.beRead==0?'已读':'未读'" plain size="mini"
							:type="item.beRead==0?'success':'error'">
						</u-tag>
					</view>
					<template #value>
						<view>
							<u-icon
							    name="weixin-circle-fill"
							    size="30"
							    color="#909399"
							></u-icon>
						</view>
					</template>
					<template #label>
						<view>
							<text class="u-cell-text" v-if="item.topicMap">[{{item.topicMap.title}}]</text>
						</view>
					</template>
					<template #right-icon>
					</template>
				</u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script setup>
	import {
		onReachBottom,
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref,
		reactive,
		inject
	} from "vue"
	const datas = reactive([]);
	const http = inject("$http")
	const params = reactive({
		page: 1,
		size: 20
	})
	const notdata = ref(false)
	onLoad(() => {
		datas.splice(0, datas.length);
		//已经使用的时间
		http.post("/topicMessage/getMessageGroupList", params).then((res) => {
			if (res && res.data && res.data.code == 1) {
				if (res.data.rows.length < params.page) {
					notdata.value = true;

				}
				res.data.rows.forEach((item) => {
					datas.push(item);
				})
			}
		}).catch((re) => {
			console.log(re);
		});
	})

	onReachBottom(() => {
		console.log("================================")
		if (notdata.value == true) {
			return;
		}
		params.page++;
		//已经使用的时间
		http.post("/topicMessage/getMessageGroupList", params).then((res) => {
			if (res && res.data && res.data.code == 1) {
				if (res.data.rows.length < params.page) {
					notdata.value = true;
				}
				res.data.rows.forEach((item) => {
					datas.push(item);
				})
			}
		}).catch((re) => {
			console.log(re);
		});
	})

	function onClick(item) {
		let toId = item.topicId.split("-")[0];
		let toName = item.topicMap.title;
		let url = "/pages/components/words-pad/words-pad?topicId=" + item.topicId + "&replyUserId=" + item.replyUserId +
			"&toId=" + toId + "&toName=" + toName;
		uni.navigateTo({
			url: url
		})
	}
	//转化标题显示
	function getTitle(item) {
		let str = []
		if (item.type == 0) {
			str.push("个人留言");
		} else if (item.type == 1) {
			str.push("项目留言");
		} else if (item.type == 2) {
			str.push("职员私信");
		} else if (item.type == 3) {
			str.push("项目通知");
		} else if (item.type == 4) {
			str.push("领导任务");
		}
		return str.join("");
	}
</script>

<style scoped lang="scss">
	.cell-page {
		padding-bottom: 20px;
		background-color: #FFFFFF;
	}

	.cell-box {
		&__title {
			font-size: 14px;
			color: rgb(143, 156, 162);
			margin: 20px 0px 0px 15px;
		}

		&__block {
			// background-color: #fff;
			margin-top: 20px;
		}
	}

	.u-page {
		padding: 0;

		&__item {

			&__title {
				color: $u-tips-color;
				background-color: $u-bg-color;
				padding: 15px;
				font-size: 15px;

				&__slot-title {
					color: $u-primary;
					font-size: 14px;
				}
			}
		}
	}

	.u-slot-title {
		@include flex;
		flex-direction: row;
		align-items: center;
	}

	.u-cell-text {
		font-size: 15px;
		line-height: 22px;
		color: #303133;
		margin-right: 5px;
	}

	.u-slot-value {
		line-height: 17px;
		text-align: center;
		font-size: 10px;
		padding: 0 5px;
		height: 17px;
		color: #FFFFFF;
		border-radius: 100px;
		background-color: #f56c6c;
	}
</style>